@extends("backend.layout.main")

@section("after.css")
<script type="text/javascript" src="backend/js/laydate.js"></script>
@endsection
@section("right_content")
<div class="mainWrapBox">
    <div class="mainBox">
		<div class="html">
			<div class="body">
				<div class="pro_main">
				<div class="infor_mian">


				<!--right-->

                <div class="info_right" style="margin-bottom: 20px;">

                
                        <div class="info_rights_title">
                            概述
                        </div>
                          <table class="table-font12">
                            <thead class="table-font12-header">
                            <tr class="gaishu">
                                <th>基本工资<p>10</p></th>
                                <th>项目绩效<p>10</p></th>                              
                                <th>财务报销<p>10</p></th>
                                <th>商务经理<p>10</p></th>
                            </tr>
                            </thead>
                          </table>
                </div>


	           <div class="info_right" style="margin-bottom: 20px;">
                   <div class="info_rights_title">

						产值
					</div>



					<div class="filter-panel mt10">
					<span class="ml10">
						指定日期范围 <input id="startDate" value="" name="startDate" onclick="" type="text" class="inputStyle w150 times_in">~
					<input id="endDate" value="" onclick="" name="endDate" type="text" class="inputStyle w150 times_in">
					<input type="button" value="查询" class="searchDateBtn" id="search">
					</span>
					</div>






					<table class="table-font12">
						<thead class="table-font12-header">
						<tr>
                            <th>项目编号</th>
                                <th>项目名称</th>
                                
                                <th>任务</th>
                                <th>商务经理</th>
                                <th>产值</th>
                                <th>发起时间</th>
                                <th>确认时间</th>
                                <th>状态</th>
						</tr>
						</thead>
						<tbody class="table-font12-body">
						@foreach($task as $t)
							<tr>
								<td>{{ $t->task_id }}</td>
								<td>{{ $t->task_name }}</td>
								
								<td>{{$member[$t->member_id_task]}}</td>
								<td>{{$member[$t->member_id] or ''}}</td>
								<td>{{$t->money}}</td>
								<td>{{$t->updated_at}}</td>
								<td><a>已确认</a></td>
							</tr>
						@endforeach
						</tbody>
					</table>
				</div>







				<div class="info_right">

                                <div class="panel-modal-header ">
                                    <span class="panel-modal-title">费用支出明细 · 全公司 </span>
                                   
                                </div>                                   


 <!--            精确搜索时间 -->
            <form  method="get" action="/backend/work/expense/search">   
                <span class="xm- xm-time" style="margin-top: 5px; float: left;">
                    &nbsp;&nbsp;&nbsp;时间范围：
                    <input type="text" id="startDate" name="startDate"  class="inputStyle w90 times_in" placeholder="请选择时间" onClick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="width: 170px; text-align: center;">
                    ~
                    <input type="text" id="endDate" name="endDate"  class="inputStyle w90 times_in" placeholder="请选择时间" onClick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="width: 170px; text-align: center;">
                    <input type="submit" value="查询" class="searchDateBtn">
                </span>

          </form>
 <!--            精确搜索内容 -->
          <form id="queryForm_1" method="get" action="/backend/work/expense/search">                          
                        <div class="ml10" style="float: right; margin: 5px 15px">请输入查找关键字
                            <input type="text"  class="inputStyle w150"  val="" name="keyWords">

                            <input type="submit" value="搜索" class="searchDateBtn">
                        </div>
         </form>
         







                        <div id="table_1">  


                        <table cellpadding="0" cellspacing="0" class="table-font12 mt10">
                        <thead class="table-font12-header">
                        <tr >
                            <th width="120px;">费用类型</th>
                            <th width="100px;">申请时间</th>
                            <th width="100px;">金额</th>
                            <th>内容</th>
                            <th width="200px">关联项目</th>
                            <th width="90px">查看凭证</th>
                            <th width="40px">状态</th>
                            <th width="120px" style="text-align: center;">原因</th>
                        </tr>
                        </thead>
                        <tbody class="table-font12-body">



				 @foreach($expense as $v)

				    <tr>

				   
				         <td>{{ $v->expense_type }}</td>
				         <td>{{ $v->time }}</td>
				         <td>{{ $v->salary }}元</td>
				         <td>{{ $v->description }}</td>
				         <td>{{ $v->itemname }}</td>

				         <td><div class="piclookc" style="width:32px;height:32px;cursor: pointer;" data-id="{{ $v->fid }}"><img src="/backend/images/pic-pic.png"></div></td>


				         <td id="position">
				         @if( $v->status==2 )
				         <span>审核中</span>
				         @elseif( $v->status==0 )
				         <span>通过</span>
				         @elseif( $v->status==1 )
				         <span>未通过</span>
				         @endif
				         </td>

                         <td style="text-align: center;">{{ $v->reason }}</td>
				        
				    </tr>

				 @endforeach

                        </tbody>
                    </table>


                    
<table class="table ">
    <tbody class="table-footer">
    <tr>
        <td style="text-align: left;">
            <span>
                       <div class="page_list" style="float: right; margin-right: 0">
                            {!! $expense->render() !!} 
                            <span style="font-size: 16px">共{!! $expense->total() !!}数据</span>
                            
                        </div>
            </span>
        </td>

    </tr>
    </tbody>
</table>

                    </div>
                     
                    </div>

				<!--right-->

				</div>
				<div class="cl"></div>
				 </div>
			</div>
		</div>
	</div>
</div>

<!--图片显示div开始-->




  

    <div class="modal" id="piclook" style="display:none">
        <div class="modal-header ">
            <span class="modal-title">
            <div><em id="sortimg"></em>/<em id="numallimg">3</em></div> </span>
        </div>

         <div class="modal-body" style="padding:15px;height:600px;text-align:center;position: relative;">


        </div>
<div>
              <div class="left_move"><img src="/backend/images/left_move.png"></div>
           <div class="right_move"><img src="/backend/images/right_move.png"></div> 
</div>

      </div>

   

      
<script type="text/javascript" src="/backend/js/jquery.min.js"></script>
<script type="text/javascript" src="/backend/js/laydate.js"></script>
<script type="text/javascript" src="/backend/js/jquery.hDialog.min.js"></script>

<script type="text/javascript">
   
var s_start = {
elem: '#startDate',
format: 'YYYY-MM-DD',
min: '2000-01-01', //设定最小日期为当前日期
max: '2100-12-31', //最大日期
istime: true,
istoday: false,
choose: function(datas){
s_end.min = datas; //开始日选好后，重置结束日的最小日期
s_end.start = datas //将结束日的初始值设定为开始日
}
};

var s_end = {
elem: '#endDate',
format: 'YYYY-MM-DD',
min: '2000-01-01', //设定最小日期为当前日期
max: '2100-12-31', //最大日期
istime: true,
istoday: false,
choose: function(datas){
s_start.max = datas; //结束日选好后，充值开始日的最大日期
}
};
laydate(s_start);
laydate(s_end);

$(document).on('click','.piclookc',function(){

   $('.modal-body').empty();
    var id = $(this).attr('data-id');

    $.ajax({
        type:'GET',
        url:"backend/work/expense/ajaxpic",
        data:{id:id},
        dataType:'json',
        success:function(e){
           // alert(e.length);

            for( var i=0; i<e.length;i++ ){


                $('.modal-body').append("<img src='/uploadsExpense/"+e[i]+"'  class='look-pic' />");
                $('.look-pic').removeClass('show');
                $('.look-pic').eq(0).addClass('show');
                $('#numallimg').html(e.length);
                $('#sortimg').html(1);

            }
        }
    });


 })


$('.piclookc').hDialog({
                box:'#piclook',
                width:'900px',
                height:'600px',
                positions: 'top',
                modalHide: true,
                closeBg: '#fff',
        }); 


 $(document).on('click','.right_move',function(){
     $('.look-pic').each(function(index){
        if ($(this).hasClass('show')) {
            if(index+1==$('.look-pic').length){
                $('#sortimg').html(1);
            }else{
                $('#sortimg').html(index+2);
            }
         $('.look-pic').removeClass('show');
         if(index+1==$('.look-pic').length){
            $('.look-pic').eq(0).addClass('show');
         }else{
              $('.look-pic').eq(index+1).addClass('show');
         }
       
       return false;
        }
     })
  
 })
  $(document).on('click','.left_move',function(){
     $('.look-pic').each(function(index){
        if ($(this).hasClass('show')) {
            if(index==0){
                $('#sortimg').html($('.look-pic').length);
            }else{
                $('#sortimg').html(index);
            }
         $('.look-pic').removeClass('show');
         if(index==0){
            $('.look-pic').eq($('.look-pic').length-1).addClass('show');
         }else{
              $('.look-pic').eq(index-1).addClass('show');
         }
       
       return false;
        }
     })
  
 })


      function request(paras){   
            var url = location.href;   
            var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");   
            var paraObj = {}   
            for (i=0; j=paraString[i]; i++){   
                paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);   
            }   
            var returnValue = paraObj[paras.toLowerCase()];   
            if(typeof(returnValue)=="undefined"){   
                return "";   
            }else{   
                return returnValue;   
            }   
    }



    var keyWords=request("keyWords");
    var startDate=request("startDate");
    var endDate=request("endDate");
    $('#startDate').val(decodeURI(startDate));
    $('#endDate').val(decodeURI(endDate));
    $('#keyWords').val(decodeURI(keyWords));



</script>
@endsection